<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文章列表</title>
    <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="libs/layui/css/modules/layer/default/layer.css">
    <script src="./libs/jquery/jquery.min.js"></script>
    <script src="libs/layui/lay/modules/layer.js"></script>
    <!-- 引入通用ajax请求 -->
    <script src="js/login.js"></script>
    <script>
        $(function() {
            //调用获取当前登录用户的详情数据方法
            get_info()



            //调用修改后登陆用户的详情数据方法
            alter_submit()
        })

        //获取当前登录用户的详情数据方法
        function get_info() {
            myAjaxImg('get', '/admin/user/detail', null, function(resData) {
                let data = resData.data;
                $('#username').val(data.username);
                $('#nickname').val(data.nickname);
                $('#email').val(data.email);
                $('.user_pic').prop('src', data.userPic);
                $('#password').val(data.password);
            })
        }

        // 实现本地的图片选择预览 给选择文件按钮添加一个onchange事件
        function changeImg() {
            console.log(this);
            //获取图片文件对象
            let file = document.querySelector('#exampleInputFile').files[0]

            //创建本地路径
            let url = URL.createObjectURL(file);

            //将图片本地路径赋值给img对象的src完成本地显示
            $('.user_pic').prop('src', url)
        }

        //修改后登陆用户的详情数据方法
        function alter_submit() {
            //用户点击修改按钮,提交数据
            $('.btn-success').click(function() {
                //获取用户修改后的数据 根据api文档得知是通过FormData传入请求参数提交的 页面元素数据实例化到FormData中
                console.log($(this));
                let formData = new FormData();
                formData.append("username", $('#username').val());
                formData.append('nickname', $('#nickname').val());
                formData.append('email', $('#email').val());
                let file = document.querySelector('#exampleInputFile').files[0];
                formData.append('userPic', file);
                formData.append('password', $('#password').val());

                //发出ajax请求
                myAjaxImg('post', '/admin/user/edit', formData, function(resData) {
                    if (resData.code !== 200) {
                        layer.msg(resData.msg);
                        return
                    }

                    //  提示成功信息
                    layer.msg('修改成功');

                    //调用index.html中的get_userInfo()方法
                    //  由于user.html是在iframe中的，此时要通过js代码去更新index.html中的用户头像和昵称
                    // 通过window.parent.get_userInfo()代码一定要使用http协议打开页面，使用file协议打开的页面执行不成功的

                    window.parent.get_userInfo();
                })
            })
        }
    </script>
</head>

<body>
    <div class="container-fluid">
        <div class="common_title">
            用户信息修改
        </div>
        <div class="container-fluid common_con">
            <form class="form-horizontal article_form" id="form">
                <div class="form-group">
                    <label for="inputEmail1" class="col-sm-2 control-label">用户名称：</label>
                    <div class="col-sm-4">
                        <input type="text" name="username" class="form-control username" id="username" value="李思思">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail2" class="col-sm-2 control-label">昵称：</label>
                    <div class="col-sm-4">
                        <input type="text" name="nickname" class="form-control nickname" id="nickname" value="哈哈思">
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">邮箱：</label>
                    <div class="col-sm-4">
                        <input type="email" name="email" class="form-control email" id="email" value="520@163.com">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputPassword3" class="col-sm-2 control-label">用户图标：</label>
                    <div class="col-sm-10">
                        <img src="images/2.jpg" alt="" class="user_pic">
                        <input style="display: block" name="userPic" type="file" onchange="changeImg()" id="exampleInputFile">
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail4" class="col-sm-2 control-label">密码：</label>
                    <div class="col-sm-4">
                        <input type="password" name="password" class="form-control password" id="password" value="12345678">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-success btn-edit">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>

</html>